<template>
  <div id="app">
    <form @submit.prevent="diagnose()">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" v-model="name" required><br><br>

      <label for="age">年龄：</label>
      <input type="number" id="age" name="age" v-model="age" required><br><br>

      <label for="height">身高：</label>
      <input type="number" id="height" name="height" v-model="height" required step="0.01">(米)<br><br>

      <label for="weight">体重：</label>
      <input type="number" id="weight" name="weight" v-model="weight" required>(公斤)<br><br>

      <label for="history">病史：</label>
      <input type="text" id="history" name="history" v-model="history"><br><br>

      <button type="submit">诊断</button>
    </form>

    <p id="result" v-if="bmi">患者  {{ this.name }}  的诊断结果： {{ this.bmi }}</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      name: '',
      age: 0,
      height: 0,
      weight: 0,
      history: '',
      bmi: '',
    }
  },
  methods: {
    diagnose() {
      this.bmi = this.weight / (this.height * this.height);
      if (this.bmi <= 18.5) {
        this.bmi = '体重过轻';
      } else if (this.bmi <= 24.9) {
        this.bmi = '正常';
      } else if (this.bmi <= 29.9) {
        this.bmi = '体重过重';
      } else {
        this.bmi = '肥胖';
      }
    }
  }
}
</script>

<style>
#app {
  margin: 60px;
}
</style>
